ES6学习摘要（03）（新人学习）

头像
LishiJ
    阅读 6 分钟

    ECMAScript6/ES6 入门

    let和const命令
    变量的解构赋值

    五、字符串的扩展

    注：这章没什么可以理解的，看过一遍就行，所以大体上我把有用的一些东西拷过来给大家看下。
    1、字符的Unicode表示法
    JavaScript 允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。如果直接在u后面跟上超过0xFFFF的数值（比如u20BB7），JavaScript 会理解成u20BB+7。由于u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7。

    "\uD842\uDFB7"
// "?"

"\u20BB7"
// " 7"

    在ES6中做了处理，只要将码点放入大括号，就能正确解读该字符。有了这种表示法之后，JavaScript 共有 6 种方法可以表示一个字符。

    "\u{20BB7}"
// "?"

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80'
// true
    '\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

    2、codePointAt()
    对于原来的charAt和charCodeAt，是无法获取4个字节的字符串的，charCodeAt方法只能分别返回前两个字节和后两个字节的值。而有些汉字是需要4个字节的，比如：汉字“?”（注意，这个字不是“吉祥”的“吉”）的码点是0x20BB7。

    var s = "?";

s.length // 2
s.charAt(0) // ''
s.charAt(1) // ''
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271

    所以在ES6中提供了codePointAt方法，能够正确返回4个字节存储的字符串。

    let s = '?a';

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271

s.codePointAt(2) // 97

    有的人就要问了，codePointAt方法为啥是3个字符（0,1,2）？首先，JavaScript肯定是将'?a'视作3个字符的，只是ES6方法不同而已，codePointAt(0)返回的是第一字符'?',codePointAt(1)返回的是'?'（共4个字节）的后两个字节,codePointAt(2)返回的是'a'。也就是说后两个字节，codePointAt方法的结果与charCodeAt方法相同。
    同时，从上面的例子可以看出，codePointAt方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString方法转换一下。

    let s = '?a';

s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(2).toString(16) // "61"

    可能这样看上去感觉怪怪的，毕竟只有两个字符，写的时候还要去注意0,2，其实有更好的解决办法，利用for...of循环，直接看例子：

    let s = '?a';
for (let ch of s) {
  console.log(ch.codePointAt(0).toString(16));
}
// 20bb7
// 61

    3、String.fromCodePoint()
    String.fromCharCode用于从码点返回对应字符，但是这个方法不能识别 32 位的 UTF-16 字符（Unicode 编号大于0xFFFF）。

    String.fromCharCode(0x20BB7)
// "ஷ"

    ES6 提供了String.fromCodePoint方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反。

    String.fromCodePoint(0x20BB7)
// "?"
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true

    4、字符串的遍历器接口

    for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

    for...of循环遍历，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。
    5、at()
    同上，charAt不能识别码点大于0xFFFF的字符。at则可以。

    'abc'.at(0) // "a"
'?'.at(0) // "?"

    6、normalize()
    normalize()方法，用来将字符的不同表示方法统一为同样的形式，这称为 Unicode 正规化。
    许多欧洲语言有语调符号和重音符号。为了表示它们，Unicode 提供了两种方法。一种是直接提供带重音符号的字符，比如Ǒ（\u01D1）。另一种是提供合成符号（combining character），即原字符与重音符号的合成，两个字符合成一个字符，比如O（\u004F）和ˇ（\u030C）合成Ǒ（\u004F\u030C）。

    '\u01D1'==='\u004F\u030C' //false

'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true
    normalize方法可以接受一个参数来指定normalize的方式，参数的四个可选值如下。

NFC，默认参数，表示“标准等价合成”（Normalization Form Canonical Composition），返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。
NFD，表示“标准等价分解”（Normalization Form Canonical Decomposition），即在标准等价的前提下，返回合成字符分解的多个简单字符。
NFKC，表示“兼容等价合成”（Normalization Form Compatibility Composition），返回合成字符。所谓“兼容等价”指的是语义上存在等价，但视觉上不等价，比如“囍”和“喜喜”。（这只是用来举例，normalize方法不能识别中文。）
NFKD，表示“兼容等价分解”（Normalization Form Compatibility Decomposition），即在兼容等价的前提下，返回合成字符分解的多个简单字符。

    7、includes(), startsWith(), endsWith()
    indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

    includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
    let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

    这三个方法都支持第二个参数，表示开始搜索的位置。

    let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

    8、repeat()
    repeat方法返回一个新字符串，表示将原字符串重复n次。参数如果是小数，会被取整。如果repeat的参数是负数或者Infinity，会报错。

    'x'.repeat(3) // "xxx"
'na'.repeat(2.9) // "nana"
'na'.repeat(0) // ""
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

    但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。

    'na'.repeat(-0.9) // ""

    参数NaN等同于 0。

    'na'.repeat(NaN) // ""

    如果repeat的参数是字符串，则会先转换成数字。

    'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

    9、padStart()，padEnd()
    如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

    'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

    如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。

    'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

    如果省略第二个参数，默认使用空格补全长度。

    'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

    padStart的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

    '1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

    10、模板字符串
    用反引号（`）标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

    // 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

    11、实例：模板编译

    let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

    上面代码在模板字符串之中，放置了一个常规模板。该模板使用<%...%>放置 JavaScript 代码，使用<%= ... %>输出 JavaScript 表达式。
    怎么编译这个模板字符串呢？

    一种思路是将其转换为 JavaScript 表达式字符串。

    echo('<ul>');
for(let i=0; i < data.supplies.length; i++) {
  echo('<li>');
  echo(data.supplies[i]);
  echo('</li>');
};
echo('</ul>');

    这个转换使用正则表达式就行了。

    let evalExpr = /<%=(.+?)%>/g;
let expr = /<%([\s\S]+?)%>/g;

template = template
  .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
  .replace(expr, '`); \n $1 \n  echo(`');

template = 'echo(`' + template + '`);';

    然后，将template封装在一个函数里面返回，就可以了。

    let script =
`(function parse(data){
  let output = "";

  function echo(html){
    output += html;
  }

  ${ template }

  return output;
})`;

return script;

    将上面的内容拼装成一个模板编译函数compile。

    function compile(template){
  const evalExpr = /<%=(.+?)%>/g;
  const expr = /<%([\s\S]+?)%>/g;

  template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');

  template = 'echo(`' + template + '`);';

  let script =
  `(function parse(data){
    let output = "";

    function echo(html){
      output += html;
    }

    ${ template }

    return output;
  })`;

  return script;
}

    compile函数的用法如下。

    let parse = eval(compile(template));
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
//   <ul>
//     <li>broom</li>
//     <li>mop</li>
//     <li>cleaner</li>
//   </ul>

    11、String.raw()
    String.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。

    String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"

String.raw`Hi\u000A!`;
// 'Hi\\u000A!'

    如果原字符串的斜杠已经转义，那么String.raw不会做任何处理。

    String.raw`Hi\\n`
// "Hi\\n"

    String.raw的代码基本如下。

    String.raw = function (strings, ...values) {
  let output = "";
  let index;
  for (index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }

  output += strings.raw[index]
  return output;
}

    String.raw方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。

    String.raw方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。

    String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'

    // 等同于

    String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);
    javascriptecmascriptecmascript-6阮一峰
    LishiJ
    295 声望1 粉丝
    « 上一篇
    ES6学习摘要（02）（新人学习）

    引用和评论

    推荐阅读
    头像
    如何实现一个楼中楼的评论系统

    小蚊酱赞 22阅读 9.9k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新